<!-- 附件上传 -->
<template>
	<el-upload class="upload-demo" action="/member-security/file/fileUploadCommonForweb" ref="uploads"
		:on-success="handleAvatarSuccess" :before-upload="handleupload" :on-preview="handlePreview"
		:on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="limit" :headers="headers"
		:on-exceed="handleExceed" :accept="accept" :disabled="disabled" :file-list="fileList"
		:show-file-list="showFileList">
		<el-button v-blur :disabled="disabled" size="small" type="primary" plain>点击上传</el-button>
	</el-upload>
</template>

<script>
export default {
	name: "fileUpload",
	props: {
		accept: String, //文件格式
		limit: Number, //文件限制数量
		disabled: { //是否禁用
			type: Boolean,
			default: false
		},
		//是否显示文件列表
		showFileList: {
			type: Boolean,
			default: true
		},
		//文件列表的绑定对象
		value: {
			type: Array,
			default: function () {
				return []
			}
		},
	},
	watch: {
		//监听绑定的值的变化 处理 文件列表
		value(newvalue, old) {
			//转换为本地需要的显示效果
			let filelist = []
			if (newvalue) {
				for (let i = 0; i < newvalue.length; i++) {
					filelist[i] = {
						uid: newvalue[i].id,
						name: newvalue[i].fileName,
						filePath: newvalue[i].filePath,
					}
				}
			}
			this.fileList = filelist
		}
	},
	components: {},
	data() {
		return {
			headers: {
				token: window.sessionStorage.getItem('token')
			},
			fileList: [],//真正绑定的变量
		};
	},
	created() { },
	methods: {
		//附件回显
		setFiles(fileList) {
			if (fileList) {
				for (let i = 0; i < fileList.length; i++) {
					fileList[i].uid = fileList[i].id;
					fileList[i].name = fileList[i].fileName;
				}
				this.fileList = fileList
			}
		},
		// 获取当前文件数据
		getFiles(type) {
			return this.fileList.map(it => {
				return {
					fileName: it.name || it.fileName,
					filePath: it.response && it.response.data || it.filePath,
					businessType: type,
				}
			})
		},
		change() {
			let newdata = this.fileList.map(it => {
				return {
					fileName: it.name || it.fileName,
					filePath: it.response && it.response.data || it.filePath,
					id: it.uid
				}
			})
			this.$emit("input", newdata)
		},
		//上传成功后的数据列表
		handleAvatarSuccess(res, file, fileList) {
			if (res.message == '附件上传异常') {
				this.fileList = []
				this.$message.error('附件上传异常,请重新上传！')
			} else {
				this.fileList = fileList;
				this.$emit("upload", file, this.fileList)
				//向外传递的时候需要转换成外部的格式
				this.change();
			}
		},
		//删除后当前最新的数据列表
		handleRemove(file, fileList) {
			this.fileList = fileList;
			this.$emit("upload", file, this.fileList)
			this.change();
		},
		handlePreview(file) {
			// console.log(file);
		},
		//上传数量限制
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 ${this.limit} 个文件`);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		handleupload(file) {

		},
		doClear() {
			this.$refs.uploads.clearFiles()
		}

	}
};
</script>

<style scoped="" lang="scss">
/deep/.el-upload-list__item:first-child {
	margin-top: 0px;
	margin-bottom: 10px;
}
</style>
